<template>
	<view class="container">
		<view class="header">
			<image src="../../static/login/head.png" class="header-img"></image>
			<view class="logo">
				<image src="../../static/login/login.png" class="header-logo"></image>
			</view>
		</view>
		<view class="login">
			<view class="cu-card case card">
				<view class="cu-item shadow">
					<form>
						<view class="cu-form-group">
							<image src="../../static/login/user.png" style="width: 35rpx;height: 38rpx;"></image>
							<input placeholder="请输入用户名" name="input" style="margin-left: 10rpx;"></input>
						</view>
						<view class="cu-form-group">
							<image src="../../static/login/pass.png" style="width: 35rpx;height: 38rpx;"></image>
							<input placeholder="请输入密码" name="input" style="margin-left: 10rpx;"></input>
						</view>
						<view class="cu-form-group">
							<image src="../../static/login/pass.png" style="width: 35rpx;height: 38rpx;"></image>
							<input placeholder="请确认密码" name="input" style="margin-left: 10rpx;"></input>
						</view>
						<view class="cu-form-group">
							<image src="../../static/login/right.png" style="width: 35rpx;height: 38rpx;"></image>
							<input placeholder="验证码" name="input" style="margin-left: 10rpx;"></input>
							<image src="../../static/login/code.png" mode="" class="code"></image>
						</view>
						<view class="reigster">
							<text style="color: #CCCCCC;">已有账号？</text>
							<navigator url="../login/login" style="color: #1890FF;">直接登录</navigator>
						</view>
						<view class="cu-form-group">
							<button class="cu-btn block bg-blue margin-tb-sm lg" style="width: 100%; border-radius: 50rpx;">
								<text class="cuIconfont-spin" :class="loading ? 'cuIcon-loading2' : ''"></text> 注册</button>
						</view>
					</form>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:true
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.container {
		width: 100vw;
		height: 100vh;
	}

	.header {
		position: relative;
		width: 100%;
		height: 40vh;
	}

	.header-img {
		width: 100vw;
	}

	.logo {
		width: 252rpx;
		height: 252rpx;
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 22vh auto;
	}

	.header-logo {
		width: 252rpx;
		height: 252rpx;
	}

	.login {
		height: 800rpx;
	}

	.login .cu-card {
		box-shadow:0 4rpx 8rpx 0 rgba(0, 0, 0, 0.2);
		height: 100%;
	}

	.login .shadow {
		height: 100%;
		box-sizing: border-box;
		padding: 50rpx 15rpx;
	}
	.code{
		width: 200rpx;
		height: 80rpx;
	}
	.login .reigster{
		padding: 25rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
	}
	
</style>
